<template>
    <div class="media-header">
        <div class="media-header-form">
            <h3 v-text="name ||'File library' "></h3>
            <UserSearchName v-if="logined" v-model="keywords" shape="plain" placeholder="File name" @change="doSearching($event)" />
            <button @click="doUpload()" type="primary">
                <img src="@/assets/images/designer/dialog-media-upload.png" alt="">
                <span>Upload</span>
            </button>
        </div>

        <div class="media-header-folder" v-if="form.directory">
            <a @click="openFolder()">File library</a>
            <i class="iconfont icon-you"></i>
            <a v-text="(folders.find(i=>i.id == form.directory) || {}).folder_name || ''"></a>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    props: {
        form: { type: Object, default: () => ({}) },
        name: { type: String, default: () => '' },
        folders: { type: Array, default: () => [] },
    },
    data () {
        return {
            keywords: '',
            visible: false,
        }
    },

    computed: {
        ...mapGetters({
            logined: "getIsLogin",
        }),
    },
    watch: {
        'form.name' (newval, oldval) {
            this.keywords = newval
        }
    },
    methods: {
        doSearching () {
            const keywords = (this.keywords || "").trim()
            this.$emit('search', keywords)
        },
        openFolder (item) {
            this.$emit("open", item);
        },
        doUpload () {
            this.$emit('doUpload', true)
        },
    },
};
</script>

<style lang="scss" scoped>
.media-header-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;

    & > h3 {
        font-size: 26px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #292929;
        line-height: 40px;
        white-space: nowrap;

        & + button {
            margin-left: 18px;
        }
    }

    .user-search-name {
        height: 40px;
        margin: 0 8px;
        position: relative;
        width: 50%;
        max-width: 320px;
    }

    button {
        width: 140px;
        height: 40px;
        img {
            width: 18px;
            height: 18px;
            margin-right: 4px;
        }
    }
}

.media-header-folder {
    display: flex;
    align-items: center;
    height: 32px;
    background: #f0f0f0;
    border-radius: 8px;
    margin: 0 18px 12px;
    padding: 0 8px;

    & > a {
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 16px;
        cursor: pointer;
        &:hover {
            color: #000;
        }

        &:last-child {
            color: #000;
            cursor: default;
        }
    }

    & > i {
        margin: 0 8px;
        width: 12px;
        height: 12px;
        font-size: 12px;
        line-height: 12px;
    }
}
</style>
